<template>
	<!--正在充电页面-->
	<view class="community">
		<view class="head_bg" style="position: relative;"></view>
		<view class="big_box" style="margin-top:-190rpx;">
			<view class="guide_box">
				<view class="margin-top-sm bg-img bgys text-center">
				</view>
			</view>
		</view>
		<view class="operating_box" style="margin-top:-50rpx;margin-bottom:20rpx;">
			<view class="operating_box_inner">
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number">{{info.consumption_amount}}</view>
					<view class="money_details_text" style="color: #666666;">产生费用(元)</view>
				</view>
				<view class="detail_br" style="border-left: 1rpx solid #EDEDED;position: relative;top: 25rpx;"></view>
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number">
						{{hour}}:{{minute}}:{{second}}
					</view>
					<view class="money_details_text" style="color: #666666;">充电时长(小时)</view>
				</view>
				<view class="detail_br" style="border-left: 1rpx solid #EDEDED;position: relative;top: 25rpx;"></view>
				<view class="money_details_inner money_details_inner1">
					<view v-if="info.charging_method==0" class="money_details_number">按时</view>
					<view v-if="info.charging_method==1" class="money_details_number">按量</view>
					<view v-if="info.charging_method==2" class="money_details_number">按功率</view>
					<view class="money_details_text" style="color: #666666;">收费方式</view>
				</view>
			</view>
		</view>
		<button type="button" class="add_text_btn margin-top-lg" form-type="submit" @tap="stopcharge()">停止充电</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:[],
				hour:"00",
				minute:"00",
				second:"00",
				timer:null
			}
		},
		onShow() {
			//this.getdata();
			//this.start(20)
		},
		onLoad(options) {
			let cinfo=options.cinfo;
			this.info = JSON.parse(cinfo);
			if(this.info.minutes==0){
				this.start(0);
			}else{
				this.start(this.info.minutes*60);
			}
		},
		destroyed() {
			clearInterval(this.timer);
		},
		methods: {
			getdata() {
				let that = this;
				that.http.tokenreq({
					url: 'user/v1/chargingstatus',
				}).then((res) => {
					let e = res.data;
					console.log("e=" + JSON.stringify(e));
					if (e.code == 0 && e.success) {
						that.info = e.data;
						if(e.data.minutes==0){
							this.start(0);
						}else{
							this.start(e.data.minutes*60);
						}
					}
				})
			},
			showNum(num) {
				if (num < 10) {
					return '0' + num
				}
				return num
			},
			start(count){
				let _this = this;
				_this.timer = setInterval(function(){
					count++;
					_this.second = _this.showNum(count % 60);
					_this.hour = _this.showNum(parseInt(count / 60 / 60));
					_this.minute = _this.showNum(parseInt(count / 60) % 60);
				},1000);
			},
			stopcharge(){
				let that = this;
				that.http.tokenreq({
					url: 'user/v1/StopCharging',
					data: {
						"equipment_number":this.info.equipment_number,
						"order_no":this.info.order_no,
						"socket_port":this.info.socket_port
					}
				}).then((res) => {
					let e = res.data;
					if (e.code == 0 && e.success) {
						uni.showModal({
							content: e.message,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/my/my'
									})
								}
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: e.message
						});
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.bgys {
		background-image: url(../../../common/img/1.gif);
		height: 400rpx;
	}

	.money_details_number {
		color: black;
		font-size: 32rpx;
		font-weight: 600;
	}
</style>
